<template>
    <Header :title="state.isLogin ? '登录' : '注册'"/>
    <div class="wrap">
      <img src="@/assets/vue.svg" alt="" class="logo">
      <van-form v-if="state.isLogin" @submit="onSubmit" class="from-wrap">
        <van-cell-group inset>
          <van-field
            v-model="state.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="state.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
          <p class="change-btn" @click="changebtn">没有账号？前往注册</p>
        </div>
      </van-form>

      <van-form v-else @submit="onSubmit" class="from-wrap">
        <van-cell-group inset>
          <van-field
            v-model="state.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="state.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="state.password2"
            type="password"
            name="密码"
            label="确认密码"
            placeholder="再次输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
          <p class="change-btn" @click="changebtn">已有账号？点击登录</p>
        </div>
      </van-form>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import Header from '../components/Header.vue'
import axios from '@/api/axios.js';

import { showSuccessToast } from 'vant';
import 'vant/es/toast/style';
import { useRouter } from 'vue-router'; //import router from '@/router' 

const router = useRouter()

const state = reactive({
  username:'',
  password:'',
  password2:'',
  isLogin:true,
})

const onSubmit = async() => {
  //console.log(state.username,state.password);
  if(state.isLogin) { //登录请求
    const res = await axios.post( '/user/login',{
      username: state.username,
      password: state.password,
    });
    //console.log(res);
    localStorage.setItem('token', res.data.token)
    router.push('/page')

  }else{ //注册请求
    const res = await axios.post( '/user/register',{
      username: state.username,
      password: state.password,
    });
    showSuccessToast(res.msg);
    state.isLogin = true;
  }
}
const changebtn = () => {
  state.isLogin = !state.isLogin
}
</script>

<style lang="less" scoped>
@import '@/assets/style/custom.less';
.wrap{
  height: calc(100% - 46px);
  padding: 30px 20px 0 20px;
  background: @primary-bg;
  .logo{
    width: 150px;
    display: block;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .change-btn{
    text-align: center;
    margin: 10px 0;
    font-style: 14px;
    color: @link-color;
  }

}
</style>